<template>
<div class="shoppingCarOne">
    <!-- 单个商品的数据 -->
    <div>
        <!-- 商品 -->
        <div class="goods">
            <div class="leftChoose">
                <div class="topLeft" @click="changeShow">
                    <img class="topLeftImg" v-show="chooseShow" src="../../assets/image/shoppingCar/choose.png">
                </div>
            </div>

            <!-- 商品的图片 -->
            <img class="imgContent" src="../../assets/image/shoppingCar/goodsImg.png">
            <!-- 商品的内容 -->
            <div class="goodsContent">
                <!-- 商品的名字 -->
                <p class="goodsTopic">被他所把欸是的所把欸是的发挥后发被是大是发挥后发被是大是大非零零</p>
                <!-- 商品的规格 -->
                <p class="goodsSize">产品的规格&nbsp;:&nbsp;<em>蓝色</em></p>
                <!-- 商品的价格，加减数量 -->
                <div class="priceCount">
                    <div class="goodsPrice">
                        <em>￥49.9</em>
                        <em>￥56.8</em>
                    </div>
                    <!-- 计算数量加一减一 -->
                    <div class="countNumber">
                        <img class="controlNumber" src="../../assets/image/shoppingCar/reduceNumber.png">
                        <em>&nbsp;&nbsp;1&nbsp;&nbsp;</em>
                        <img class="controlNumber" src="../../assets/image/shoppingCar/addNumber.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="gifts"></div>
    </div>

</div>
</template>

<script>
export default {
    name: "ShoppingCarOne",
    data() {
        return {
            chooseShow: true,
        }
    },
    methods: {
        changeShow() {
            this.chooseShow == true ? this.chooseShow = false : this.chooseShow = true;
        }
    },
}
</script>

<style scoped>
.shoppingCarOne {
    font-size: .4rem;
    font-weight: 600;
}

.goods {
    width: 100%;
    height: 2.5rem;
    display: -webkit-flex;
    display: flex;
    align-items: center;

}

.leftChoose {
    width: .8rem;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

.topLeft {
    background: url('../../assets/image/shoppingCar/unchoose.png') no-repeat;
    background-size: cover;
    height: .50rem;
    width: .50rem;
    float: left;
}

.topLeftImg {
    height: 100%;
    width: 100%;
}

.imgContent {
    width: 2.5rem;
    height: 2.5rem;

}

.goodsContent {
    /* height: 100%;
    width: 100%; */
    height: 2.5rem;
    margin-left: .5rem;
    width: 60%;

}

.goodsSize {
    height: .9rem;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    font-size: .4rem;
    color: #666666;
}
.goodsPrice>em:first-child{
    color: red;
}
.goodsPrice>em:last-child{
text-decoration: line-through;
color: #666666;
font-size: .32rem;
margin-left: .2rem;
}
.goodsTopic {
    font-size: .45rem;
    font-weight: 900;
    color: #333333;
    height: 1rem;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.priceCount {
    width: 100%;
    height: .6rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: .5rem;
    color: #666666;

}

.controlNumber {
    height: .5rem;
    width: .5rem;
}

.countNumber {
    display: flex;
    display: -webkit-flex;

    align-items: center;
}
</style>
